<template>
	<tab-page :current="1">
		<view class="px-3-1 pb-3-1">
			<b-search-input />
		</view>
		<view class="border-t b-active flex flex-row">
			<view style="width: 4px" />
			<view>
				<view
					v-for="(el, index) in categoryData"
					:key="el.id"
					class="flex flex-row items-end pl-1-3 pr-3-1 pb-1-3 pt-6-2"
					:class="[activeIndex === index ? 'item-shadow' : '']"
					hover-class="opacity-80"
					hover-start-time="0"
					hover-stay-time="0"
					@click="handleSelect(el, index)"
				>
					<text class="block flex-1 color-main font-semibold text-m nowrap">{{ el.name }}</text>
					<!-- <text class="block color-main text-right" style="font-size: 18rpx">{{ el.textEn }}</text> -->
				</view>
			</view>
			<view class="flex-1 list-shadow overflow-hidden">
				<c-skeleton-list :data="contentData" :loading="loading">
					<!-- <c-img-list :data="contentData" :column-num="2" :vSpace="16" :hSpace="16" @touch="toDetail(el)"></c-img-list> -->
					<view v-for="el in contentData" :key="el.mallClassId">
						<text class="block color-main font-semibold text-m px-1-3 pt-1-3">{{ el.mallClass }}</text>
						<view class="flex flex-row flex-wrap">
							<view v-for="item in el.data" :key="item.id" style="width: 50%" class="p-1-3 border-box">
								<view class="text-center" @click="toDetail(item)">
									<c-img :src="item.thumbnail" :width="200" :height="250"></c-img>
								</view>
								<view style="height: 50px" class="text-ellipsis-3" @click="toDetail(item)">
									<text class="block color-main text-n mb-2 break-all">{{ item.name }}</text>
								</view>
								<view class="row-center">
									<view class="flex-1">
										<text class="color-error font-semibold text-n">¥{{ item.price }}</text>
									</view>
									<view
										class="px-2-2"
										hover-class="opacity-50"
										hover-start-time="0"
										hover-stay-time="0"
										@click="handleToShoppingCar(item)"
									>
										<text class="iconfont icon-shopcar text-l color-main"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</c-skeleton-list>
			</view>
		</view>
	</tab-page>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { getClassList, getGoodsByClassId, addToShppingCar } from '@/base/api/goods.js';
import { getItem, removeItem } from '@/uni-sdk/utils/storage.js';
import authCache from '@/uni-sdk/utils/authCache';
import { handleToShoppingCar } from "@/base/common-business.js";

export default {
	onLoad() {
		this.isOnload = true;
	},
	onShow(e) {
		const curCategoryId = getItem('curCategoryId');
		if (curCategoryId) {
			this.curCategoryId = curCategoryId;
			removeItem('curCategoryId');
			this.reload();
		} else if (this.isOnload) {
			this.reload();
		}
	},
	setup() {
		const isOnload = ref(true);
		const commuity = authCache.getCommunity();
		if (!commuity) {
			uni.reLaunch({
				url: '/pages/login/login',
			});
			getApp().globalData.toast('请重新登录', true);
			return;
		}
		async function reload() {
			isOnload.value = false;
			if (categoryData.value.length === 0) {
				await loadCategory();
			}
			let index = 0;
			if (curCategoryId.value) {
				index = categoryData.value.findIndex((el) => el.id === curCategoryId.value);
			}
			if (activeIndex.value === index) {
				loadContent();
			} else {
				activeIndex.value = index;
			}
		}
		/**
		 * category
		 */
		const curCategoryId = ref(null);
		const activeIndex = ref(-1);
		const categoryData = ref([]);
		const loadingCategory = ref(false);
		async function loadCategory() {
			loadingCategory.value = true;
			const data = await getClassList(true);
			if (data) {
				categoryData.value = data;
			}
			loadingCategory.value = false;
		}
		function handleSelect(el, i) {
			activeIndex.value = i;
		}
		/**
		 * content
		 */
		const loading = ref(true);
		const contentData = ref([]);
		async function loadContent() {
			const item = categoryData.value[activeIndex.value];
			if (!item) return;
			loading.value = true;
			const data = await getGoodsByClassId({
				classId: item.id,
				communityId: commuity.id,
			});
			loading.value = false;
			if (data) {
				const newData = [];
				data.forEach((item) => {
					const target = newData.find((el) => item.mallClassId === el.mallClassId);
					if (target) {
						target.data.push(item);
					} else {
						newData.push({
							mallClassId: item.mallClassId,
							mallClass: item.mallClass,
							data: [item],
						});
					}
				});
				contentData.value = newData;
			}
		}
		watch(activeIndex, (val) => {
			loadContent();
		});
		function toDetail(el) {
			uni.navigateTo({
				url: '/pages/product-detail/product-detail?id=' + el.id,
			});
		}
		return {
			categoryData,
			handleSelect,
			activeIndex,
			contentData,
			loading,
			toDetail,
			loadingCategory,
			curCategoryId,
			reload,
			isOnload,
			handleToShoppingCar,
		};
	},
};
</script>
<style>
.list-shadow {
	box-shadow: -2px 4px 5px 2px rgba(0, 0, 0, 0.15);
}
.item-shadow {
	box-shadow: -2px 2px 5px 2px rgba(0, 0, 0, 0.15);
}
</style>